import Vue from "vue";
import Notice from "./Notice";

export default function notice(options) {
  /**
   * options: {
   *   title: 'xxx',
   *   content: 'xxx',
   * }
   */

  // 1. extend 创建的是一个组件构造器, 而不是一个具体的组件实例
  const NoticeConstructor = Vue.extend(Notice);
  // 2. 实例化 // 构造函数可以接传值，data、methods.....
  const instance = new NoticeConstructor({
    data: {
      title: options.title + "hhh",
      content: options.content,
    },
    methods: {
      close() {
        options.close && options.close();
        document.body.removeChild(instance.$el);
      },
    },
  });

  // 3. 手动挂载    // $mount()不带参数，会把组件在内存中渲染完毕
  instance.$mount(); // 调用$mount()方法生成需要的dom dom元素渲染完成

  // 4. 手动挂载到body  instance.$el 拿到的就是组件对应的dom元素,可以直接操作dom
  document.body.appendChild(instance.$el);

  return instance;
}
